<!-- 商品详情 -->
<template>
	<view class="detail-wrap">
		<!-- 标题栏 -->
		<view class="nav-box">
			<view class="state-hack"></view>
			<view :style="{ height: navbarHeight + 'px' }" class="nav-opt">
				<view hover-class="back-hover" class="back-box u-flex u-row-center u-col-center" @tap="goBack">
					<image src="/static/images/home/icon_back.png" mode="scaleToFill"/>
				</view>
				<view hover-class="back-hover" class="share-box u-flex u-row-center u-col-center" v-if="false" @tap="onShare">
					<image src="/static/images/home/icon_share.png" mode="scaleToFill"/>
				</view>
			</view>
		</view>
		<!-- 缺省页 -->
		<shopro-empty v-if="showEmpty" :image="`${$imgUrl}/imgs/empty/empty_goods_null.png`" :tipText="showEmptyText" btnText="返回上一页" @click="$Router.back()"></shopro-empty>
		<view class="detail_box" v-else>
			<view class="detail-content">
				<!-- 轮播 -->
				<u-swiper :height="300" borderRadius="0" :list="swiperImages" indicator-pos="bottomRight" mode="number" :interval="3000" @click="onGoodsSwiper"></u-swiper>
				<!-- 规格 -->
				<view class="u-m-b-10 title-box u-p-20 u-skeleton-fillet">
					<view class="g-t-hk" v-if="choose_sku_price">HK$<span>{{ total_price }}</span></view>
					<view class="g-t-hk" v-else>請選擇</view>
					<view class="goods-title u-m-b-10 u-ellipsis-2">{{ goodsInfo.title }}</view>
				</view>
				<!-- 规格 -->
				<view class="u-m-b-10 title-box title-flex u-p-20 u-skeleton-fillet" @tap="handleOpen()">
					<view class="t-sku-l">選擇規格</view>
					<view class="t-sku-r">
						<view v-if="choose_sku_desc.length==0">請選擇</view>
						<view v-else><text v-for="(item,index) in choose_sku_desc" :key="index">{{ item }}/</text>数量{{ quantityPurchase }}</view>
						<image src="/static/images/home/icon_small_r.png" mode="scaleToFill"/>
					</view>
				</view>
				<!-- 进店 -->
				<view class="u-m-b-10 title-box title-flex u-p-20 u-skeleton-fillet">
					<view class="t-f-l">
						<image :src="`${$imgUrl}${companyInfo.logo}`" mode="scaleToFill"/>
					</view>
					<view class="t-f-c">
						<view class="c-shop-name">{{ companyInfo.name }}</view>
						<view class="c-shop-title">已預約{{ goodsInfo.reservation_count }}</view>
					</view>
					<view class="t-f-r" @tap="handleService()" v-show="false">進店</view>
				</view>
				<view class="tab-detail u-p-20 u-m-b-10">
					<!-- 详情富文本 -->
					<view class="rich-box" v-if="tabCurrent === 'tab0'">
						<view class="title">商品詳情</view>
						<div v-html="goodsInfo.content"></div>
					</view>
				</view>
			</view>
			<!-- 规格弹窗 -->
			<uni-popup ref="rule_popup" type="bottom" border-radius="10px 10px 0 0">
				<view class="rule_con">
					<view class="price-box-popup" v-if="choose_sku_price==''">請選擇</view>
					<view class="price-box-popup" v-else>HK$<span>{{ total_price }}</span></view>
					<view class="goods-title-popup">已選：<text v-for="(item,index) in choose_sku_desc" :key="index">{{ item }}/</text>数量{{ quantityPurchase }}</view>
					<view class="line-popup"></view>
					<view class="buy-num-box" v-for="(item,index) in skuList" :key="index">
          	<view class="num-title">{{ item.name }}</view>
						<view class="cell-sku">
							<view class="item-sku" :class="subItem.checked?'active':''" @tap="chooseSku(item,index,subItem,subIndex)" v-for="(subItem,subIndex) in item.children">{{ subItem.name }}</view>
						</view>
					</view>
					<view class="buy-num-box m-b-20">
						<view class="num-title">購買數量</view>
						<u-number-box :min="1" :step="1" v-model="quantityPurchase" @change="handleQuantity()"></u-number-box>
					</view>
					<!-- <view class="detail-btn-box"><button class="u-reset-button  score-btn" @tap="handleSubmit()">確認預約</button></view> -->
				</view>
			</uni-popup>
			<!-- 	分享组件 -->
			<!-- <shopro-share v-model="showShare" :posterInfo="goodsInfo" :posterType="'goods'"></shopro-share> -->
			<!-- 登录 -->
		</view>
		<view class="fixed-footer">
			<view class="f-f-l" @tap="goHome">
				<img src="/static/images/home/icon_yuyue.png" mode=""/>
				<view>預約</view>
			</view>
			<view class="f-f-r">
				<view class="r-btn" @tap="goPay">聯繫方式</view>
				<view class="r-btn" @tap="handleService()">私訊</view>
			</view>
		</view>
	</view>
</template>

<script>
let systemInfo = uni.getSystemInfoSync();
import shComment from './components/sh-comment.vue';
import {productDetail,productReservation} from './../../utils/api'
import {productCalculatprice} from './../../utils/userApi'
export default {
	components: {
		shComment,
	},
	data() {
		return {
			// navbar
			backIconName: 'arrow-left',
			showSku: false, //是否显示规格弹窗
			currentSkuText: '', //选中规格
			detailType: '',
			newDetailType:'',
			buyType: 'sku',
			showEmpty: false,
			showEmptyText: '',
			showServe: false,
			goodsInfo: {},
			currentSkuList: [],
			skuList:[],
			swiperCurrent: 0, //轮播下标
			tabCurrent: 'tab0',
			swiperImages:[],
			companyInfo:{},
			skuPrice:[],
			p_id:0,
			choose_sku_price:'',
			choose_ids:[],
			choose_sku_desc:[],
			quantityPurchase:1,
			sku_arr:[],
		};
	},
	// 是否登录
	computed: {
		total_price(){
			return parseFloat(this.choose_sku_price)*this.quantityPurchase
		},
		navbarHeight() {
			// #ifdef APP-PLUS || H5
			return 48;
			// #endif
			// #ifdef MP
			let height = systemInfo.platform == 'ios' ? 44 : 48;
			return height;
			// #endif
		}
	},
	onLoad(options) {
		let that = this;
		this.backIconName = getCurrentPages().length > 1 ? 'arrow-left' : 'home-fill';
		this.p_id=options.id
		this.getGoodsDetail(this.p_id);
	},
	onUnload() {
	},
	methods: {
    async submitForm(){
      let obj={
        product_id:this.p_id,
        skuPrice_id:this.choose_price_id,
        price:this.total_price,
        num:this.quantityPurchase,
        username:this.username,
        phone:this.phone,
      }
      let res = await productReservation(obj)
      if(res.code==1){
        this.isHas=false
      }else{
        this.isHas=true
        uni.showToast({
					title: res.msg||'系統異常',
					icon: 'none'
				})
      }
    },
    handleSubmit(){
      if(this.choose_sku_price){
        if(this.username){
          if(this.phone){
            this.submitForm()
          }else{
            uni.showToast({
              title: '請輸入聯繫方式',
              icon: 'none'
            })
          }
        }else{
          uni.showToast({
            title: '請輸入姓名',
            icon: 'none'
          })
        }
      }else{
        uni.showToast({
					title: '請選擇商品規格',
					icon: 'none'
				})
      }
    },
		handleQuantity(){
			this.getPrice()
			// if(this.choose_sku_price){
			// 	this.choose_sku_price=parseFloat(this.choose_sku_price)*this.quantityPurchase
			// }
		},
		chooseSku(item,index,subItem,subIndex){
			item.children=item.children.map(v=>{
				return {...v,checked:false}
			})
			subItem.checked=!subItem.checked
			item.children[subIndex]=subItem
			this.skuList[index]=item
			let list=this.skuList
			let choose_ids=[]
			let choose_sku_desc=[]
			for(let i=0;i<list.length;i++){
				let sku_item=list[i]
				if(sku_item.children.length>0){
					for(let j=0;j<sku_item.children.length;j++){
						if(sku_item.children[j].checked){
							choose_ids.push(sku_item.children[j].id)
							choose_sku_desc.push(sku_item.children[j].name)
						}
					}
				}
			}
			this.choose_ids=choose_ids
			this.choose_sku_desc=choose_sku_desc
			if(this.sku_arr.length==this.choose_ids.length){
				this.getPrice()
			}
		},
		async getPrice(){
			let params={
				product_id:this.goodsInfo.id,
				sku_id:this.choose_ids.join(','),
				num:this.quantityPurchase
			}
			let res=await productCalculatprice(params)
			if(res.code==1){
				this.choose_sku_price=res.data.price
			}else{
				uni.showToast({
					title: res.msg||'系統異常',
					icon: 'none'
				})
			}
		},
		computedPrice(){
			let str=this.choose_ids.join(',')
			let list=this.skuPrice
			let list_checked=list.filter(v=>v.product_sku_ids==str)
			this.choose_sku_price=list_checked[0].price
		},
		handleOpen(){
			this.$refs.rule_popup.open();
		},
		// goBack
		// 微信直播商品跳转详情，需要用小程序原生接口才能返回。
		goBack() {
			let pageList = getCurrentPages();
			if (pageList.length > 1) {
				// #ifdef MP-WEIXIN
				wx.navigateBack();
				// #endif
				// #ifndef MP-WEIXIN
				uni.navigateBack();
				// #endif
			} else {
				uni.reLaunch({
					 url: '/pages/index/index'
				});
			}
		},

		// 轮播图预览
		onGoodsSwiper(e) {
			this.$tools.previewImage(this.goodsInfo.images, e);
		},
		// 路由跳转
		jump(path, parmas) {
			this.showShare = false;
			this.$Router.push({
				path: path,
				query: parmas
			});
		},
		// 回到首页
		goHome() {
			uni.navigateTo({ url: `/pages/goods/reservation?id=${this.p_id}` })
		},
		// 选项卡
		onTab(id) {
			this.tabCurrent = id;
		},
		async getGoodsDetail(id) {
			let that = this;
			that.loadStatus = 'loading';
			let res = await productDetail({id:id})
			if (res.code === 1) {
				that.showEmpty = false;
				that.goodsInfo = res.data.detail;
				that.companyInfo=res.data.company
				let s_list=res.data.detail.images_arr
				let s_list_new=[]
				if(s_list.length>0){
					for(let i=0;i<s_list.length;i++){
						s_list_new.push(`${this.$imgUrl}${s_list[i]}`)
					}
				}
				that.swiperImages=s_list_new
				that.skuPrice=res.data.skuPrice
				let sku_list=res.data.skuList
				that.sku_arr=res.data.skuList
				let sku_list_new=[]
				for(let i=0;i<sku_list.length;i++){
					let sku_item=sku_list[i]
					if(sku_item.children.length>0){
						for(let j=0;j<sku_item.children.length;j++){
							sku_item.children[j].checked=false
						}
					}
					sku_list_new.push(sku_item)
				}
				that.skuList=sku_list_new
			}else{
				uni.showToast({
					title: res.msg||'系統異常',
					icon: 'none'
				})
			}
		},
		// 组件返回的type;
		changeType(e) {
			this.buyType = e;
		},
		// 组件返回的规格;
		getSkuText(e) {
			this.currentSkuText = e;
		},
		// 分享
		onShare() {
			this.showShare = true;
		},
		handleService(){
			let time=this.$moment().format('YYYY-MM-DD HH:mm:ss')
			let obj={
				avatar:`${this.$imgUrl}${this.goodsInfo.image}`,
				datetime:'',
				fromuid:`${this.companyInfo.admin_uid}`,
				infotype:'txt',
				isonline:0,
				name:`${this.companyInfo.name}`,
				newinfo:'',
				noreadcount:0,
			}
      uni.navigateTo({ url: `/pages/boss/message/userMessage?option=${JSON.stringify(obj)}`});
		},
		// 立即购买
		goPay() {
			let phone=this.companyInfo.contact_phone
			uni.showActionSheet({
        itemList: [`撥打 ${phone}`],
				itemColor:'#007AFF',
        success: (res) => {
          uni.makePhoneCall({
						phoneNumber: phone,
						success: function () {
						},
						fail: function (err) {
							uni.showToast({
								icon:'none',
								title: err.msg||'系統異常'
							})
						}
					})
        },
        fail: (err) => {
          console.log('弹窗取消');
        }
      });
		}
	}
};
</script>

<style scoped lang="scss">
// 标题栏
.nav-box {
	position: fixed;
	width: 100%;
	min-height: 140rpx;
	z-index: 888;
	top: 0;
	.nav-opt{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
	.back-box {
		background: linear-gradient( 180deg, rgba(0,0,0,0.26) 0%, rgba(0,0,0,0) 100%);
		width: 30px;
		height: 30px;
		border-radius: 4px;
		margin: 22px 0 0 10px;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.share-box{
		width: 30px;
		height: 30px;
		border-radius: 4px;
		margin: 22px 10px 0 0;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.back-hover {
		background-color: rgba(#fff, 0.18);
	}
	.state-hack {
		width: 100%;
		height: var(--status-bar-height);
		/* #ifdef H5 */
		height: 20rpx;
		/* #endif */
	}
}
// 拼团玩法
.groupon-play {
	background: #fff;
	line-height: 94rpx;
	.title {
		font-size: 28rpx;
		color: #999;
	}

	.description {
		font-size: 28rpx;
		width: 500rpx;
		margin-left: 30rpx;
	}
}

// 选项卡
.tab-box {
	height: 102rpx;
	background: #fff;
	border-bottom: 1rpx solid rgba(#dfdfdf, 0.8);
	margin-top: 10rpx;

	.tab-item {
		flex: 1;
		height: 100%;
		position: relative;
		font-size: 30rpx;
		font-weight: bold;

		.tab-line {
			width: 123rpx;
			height: 4rpx;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
			background: transparent;
			position: absolute;
			z-index: 2;
		}

		.line-active {
			background: rgba(168, 112, 13, 1);
		}
	}
}

// 选项卡内容
.tab-detail {
	min-height: 300rpx;
	background: #fff;
	border-radius: 10px;
	margin: 10px auto;
	width: calc(100% - 20px);
	// 规格参数
	.goods-size {
		.table-box {
			width: 710rpx;
			margin: auto;
			background: rgba(255, 255, 255, 1);
			border: 1rpx solid rgba(223, 223, 223, 1);

			.t-tr {
				border-bottom: 1rpx solid rgba(223, 223, 223, 1);
				&:last-child {
					border-bottom: none;
				}

				.t-head {
					font-size: 26rpx;
					color: #999;
					flex: 1;
					padding: 15rpx 20rpx;
					height: 100%;
				}

				.t-detail {
					font-size: 26rpx;
					border-left: 1rpx solid rgba(223, 223, 223, 1);
					flex: 4;
					padding: 15rpx 20rpx;
					height: 100%;
				}
			}
		}
	}
	// 富文本
	.rich-box {
		width: 100%;
		overflow-x: scroll;
		.title{
			font-size: 14px;
			color: #333333;
			line-height: 20px;
			padding: 12px 0 10px 10px;
		}
		/deep/ img {
			display: block;
			// max-width: 100%;
		}
	}
	// 评论
	.goods-comment {
		.more-box {
			height: 100rpx;
			background: #fff;

			.more-btn {
				width: 200rpx;
				line-height: 60rpx;
				border: 1rpx solid rgba(213, 166, 90, 1);
				border-radius: 30rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(168, 112, 13, 1);
				padding: 0;
				background: #fff;
			}
		}
	}
}

// 规格卡片
.sku-box {
	line-height: 82rpx;
	background: #fff;
	padding: 0 20rpx;
	margin: 10rpx 0;
	font-size: 28rpx;

	.title {
		color: #999;
		margin-right: 20rpx;
	}
}

// 标题卡片
.title-box {
	background-color: #fff;
	width: calc(100% - 20px);
	margin: 10px auto 0;
	border-radius: 10px;
	.goods-price{
		height: 33px;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 15px;
		color: #FF5A14;
		line-height: 22px;
		text{
			font-size: 24px;
			margin-left: 2px;
		}
	}
	.goods-title {
		font-size: 28rpx;
		font-weight: 600;
		line-height: 42rpx;
	}
}
.title-box.title-flex{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.t-f-l{
	width: 44px;
	height: 44px;
	border-radius: 6px;
	border: 1px solid #ccc;
	image{
		width: 100%;
		height: 100%;
	}
}
.t-f-c{
	width: calc(100% - 120px);
	height: 44px;
	border-radius: 6px;
	text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  white-space: nowrap;
	.c-shop-name{
		font-weight: 500;
		font-size: 14px;
		color: #333333;
		line-height: 20px;
	}
	.c-shop-title{
		font-size: 12px;
		color: #333333;
		line-height: 17px;
		margin-top: 5px;
	}
}
.t-f-r{
	width: 62px;
	height: 33px;
	line-height: 33px;
	background: #1C7AF7;
	border-radius: 6px;
	color: #fff;
	text-align: center;
	font-size: 14px;
}
.t-sku-l{
	width: 30%;
	font-size: 14px;
	color: #333333;
	line-height: 20px;
}
.t-sku-r{
	width: 70%;
	font-size: 14px;
	color: #333333;
	line-height: 20px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	image{
		width: 6px;
		height: 12px;
		display: block;
		margin-left: 10px;
	}
}
.g-t-hk{
	font-size: 14px;
	color: #FF5A14;
	line-height: 21px;
	font-weight: 500;
	margin-bottom: 2px;
	span{
		font-weight: 600;
		font-size: 22px;
	}
}
.detail_box{
	height: calc(100vh - 50px);
	overflow-y: scroll;
}
.fixed-footer{
	height: 50px;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.f-f-l{
		width: 65px;
		font-size: 12px;
		color: #333333;
		line-height: 13px;
		text-align: center;
		img{
			width: 23px;
			height: 22px;
			margin: 5px 0 1px;
		}
	}
	.f-f-r{
		width: calc(100% - 65px);
		padding: 0 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		view{
			width: 140px;
			height: 44px;
			line-height: 44px;
			text-align: center;
			border-radius: 8px;
			font-size: 15px;
		}
		view:first-child{
			border: 1px solid #1C7AF7;
			color: #1C7AF7;
		}
		view:last-child{
			color: #fff;
			background: linear-gradient( 90deg, #016CF1 0%, #0697F6 100%);
		}
	}
}
.rule_con{
	padding: 10px 20px;
	border-radius: 20px 20px 0 0;
	background: #fff;
}
.price-box-popup{
	height: 33px;
	font-size: 15px;
	color: #FF5A14;
	line-height: 33px;
	font-weight: bold;
	margin-bottom: 4px;
	span{
		font-size: 24px;
	}
}
.goods-title-popup{
	font-size: 12px;
	color: #333333;
	line-height: 13px;
}
.line-popup{
	background: #ddd;
	height: 0.5px;
	margin: 13px 0 0;
}
.buy-num-box{
  padding-top: 20px;
  .num-title{
    height: 21px;
    font-weight: bolder;
    font-size: 15px;
    color: #333333;
    line-height: 21px;
    margin-bottom: 10px;
  }
}
.cell-sku{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  view{
    border-radius: 8px;
    padding: 5px 12px;
    background: #F2F2F2;
    font-size: 14px;
    color: #333333;
    line-height: 20px;
    margin-left: 10px;
  }
  view:first-child{
    margin-left: 0;
  }
	view.active{
		border: 1px solid #1C7AF7;
		background-color: #fff;
	}
}
::v-deep .detail-content{
	.u-indicator-item-number{
		margin-right: 20px;
	}
}
.detail-btn-box .score-btn{
  width: calc(100% - 20px);
  margin: 0 auto;
  height: 44px;
  background: #FFFFFF;
  border-radius: 8px;
  font-weight: 500;
  font-size: 15px;
  color: #FFFFFF;
  line-height: 44px;
  background: linear-gradient( 90deg, #016CF1 0%, #0697F6 100%);
}
</style>
